<template>
    <mt-picker :slots="areaSlots" @change="onValuesChange" :valueKey="'name'" :showToolbar="true"></mt-picker>
</template>
<script>
import { provinceList } from "@/utils/area.js";
export default {
    name:'',
    data() {
        return{
            areaSlots: [
                {
                flex: 1,
                values: provinceList,
                className: "slot1",
                textAlign: "center"
                },
                {
                divider: true,
                content: "-",
                className: "slot2"
                },
                {
                flex: 1,
                values: provinceList[0].cityList,
                className: "slot3",
                textAlign: "center"
                },
                {
                divider: true,
                content: "-",
                className: "slot2"
                },
                {
                flex: 1,
                values: provinceList[0].cityList[0].areaList,
                className: "slot3",
                textAlign: "center"
                }
            ]
        }
    },
    methods: {
        //   地区三级联动
        onValuesChange(picker, values) {
            if (!values[0]) {
                this.$nextTick(() => {
                if (this.provinceList) {
                    // 赋默认值
                } else {
                    picker.setValues([
                    provinceList[0],
                    provinceList[0].cityList[0],
                    provinceList[0].cityList[0].areaList[0]
                    ]);
                }
                });
            } else {
                picker.setSlotValues(1, values[0].cityList);
                let town = [];
                if (values[1]) {
                    town = values[1].areaList;
                }
                picker.setSlotValues(2, town);
            }
            this.$emit('pickerChange',values);
        }
    },
    mounted() {
    },
}
</script>
<style lang="less" scoped>

</style>
